<template>
  <el-form
    ref="firstForm"
    :model="itemData"
    :label-width="page === 'home' ? '1rem' : '1.3125rem'"
    class="flex flex-wrap pr-10 open-form help-box"
  >
    <el-form-item :label="$t('NO_PASS_OPTICAL_CABLE')" class="w-50">
      <el-select
        v-model="itemData.forbiddenCable"
        filterable
        multiple
        clearable
        collapse-tags
        @visible-change="visibleChange($event, 'forbiddenCable')"
      >
        <el-option
          v-for="item in forbiddenCableList"
          :key="item.cableId"
          :value="item.cableId"
          :label="item.cableName"
          :disabled="itemData.necessaryCable.includes(item.cableId)"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('ESSENTIAL_OPTICAL_CABLE')" class="w-50">
      <el-select
        v-model="itemData.necessaryCable"
        filterable
        multiple
        clearable
        collapse-tags
        @visible-change="visibleChange($event, 'necessaryCable')"
      >
        <el-option
          v-for="item in necessaryCableList"
          :key="item.cableId"
          :value="item.cableId"
          :label="item.cableName"
          :disabled="itemData.forbiddenCable.includes(item.cableId)"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('FORBIDDEN_STATION')" class="w-50 filter-station">
      <region-cascader
        class="block"
        multiple
        :other-data="forbiddenTreeDataList"
        :selected-ids="itemData.forbiddenStation"
        :placeholder="'FORBIDDEN_STATION'"
        @change="forbiddenStationChange"
        @open="regionCascaderOpen('forbiddenStation')"
      />
    </el-form-item>
    <el-form-item :label="$t('NECESSARY_STATION')" class="w-50 filter-station">
      <region-cascader
        class="block"
        multiple
        flat
        :other-data="necessaryTreeDataList"
        :selected-ids="itemData.necessaryStation"
        :placeholder="'NECESSARY_STATION'"
        query-class="necessaryStationCheck"
        @change="necessaryStationChange"
        @open="regionCascaderOpen('necessaryStation')"
      />
    </el-form-item>
  </el-form>
</template>
<script>
  import { mapGetters } from 'vuex'
  import nodeApi from '@/api/oen/NodeApi'
  import cableApi from '@/api/oen/CableApi'
  import { buildTree, getParentsById, deepClone } from '@/utils/common'
  import RegionCascader from '@/components/RegionCascader'

  export default {
    components: { RegionCascader },
    props: {
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      page: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        allCable: [],
        forbiddenCableList: [],
        necessaryCableList: [],
        allTreeList: [],
        forbiddenTreeDataList: [],
        necessaryTreeDataList: [],
        itemData: {
          necessaryCable: [],
          forbiddenCable: [],
          necessaryStation: [],
          forbiddenStation: []
        }
      }
    },
    computed: {
      ...mapGetters(['baseRegionList']),
      necessaryTreeData() {
        const data = this.allTreeList.map(i => {
          return {
            ...i,
            isDisabled:
              this.itemData.forbiddenStation.includes(i.regionId) || i.regionType === 'REGION'
          }
        })
        return buildTree(data, 'regionId', 'parentId', 'children')
      },
      forbiddenTreeData() {
        const data = this.allTreeList.map(i => {
          return {
            ...i,
            isDisabled: this.itemData.necessaryStation.includes(i.regionId)
          }
        })
        return buildTree(data, 'regionId', 'parentId', 'children')
      }
    },
    created() {
      this.getAllNode()
      this.getAllCable()
    },
    methods: {
      visibleChange(val, type) {
        // 光缆选中后排序 选中排前面 禁用的排最后
        if (val) {
          const forbiddenCable = this.itemData.forbiddenCable
          const necessaryCable = this.itemData.necessaryCable
          if (type === 'forbiddenCable') {
            const allCable = deepClone(this.allCable)
            allCable.sort((a, b) => {
              if (!necessaryCable.includes(a.cableId)) {
                return -1
              }
              return 1
            })
            allCable.sort((a, b) => {
              if (forbiddenCable.includes(a.cableId)) {
                return -1
              }
              return 1
            })
            this.forbiddenCableList = allCable
          } else {
            const allCable = deepClone(this.allCable)
            allCable.sort((a, b) => {
              if (!forbiddenCable.includes(a.cableId)) {
                return -1
              }
              return 1
            })
            allCable.sort((a, b) => {
              if (necessaryCable.includes(a.cableId)) {
                return -1
              }
              return 1
            })
            this.necessaryCableList = allCable
          }
        }
      },
      regionCascaderOpen(type) {
        // 区域选中后排序
        if (type === 'forbiddenStation') {
          const allTreeList = deepClone(this.forbiddenTreeData)
          const forbiddenStation = this.itemData.forbiddenStation
          const parentIds = []
          forbiddenStation.forEach(i => {
            const arr = getParentsById(allTreeList, i, 'regionId')
            if (arr.length) {
              parentIds.push(arr[arr.length - 1]['regionId'])
            }
          })
          allTreeList.sort((a, b) => {
            if (parentIds.includes(a.regionId)) {
              return -1
            }
            return 1
          })
          this.forbiddenTreeDataList = allTreeList
        } else {
          const allTreeList = deepClone(this.necessaryTreeData)
          const necessaryStation = this.itemData.necessaryStation
          const parentIds = []
          necessaryStation.forEach(i => {
            const arr = getParentsById(allTreeList, i, 'regionId')
            if (arr.length) {
              parentIds.push(arr[arr.length - 1]['regionId'])
            }
          })
          allTreeList.sort((a, b) => {
            if (parentIds.includes(a.regionId)) {
              return -1
            }
            return 1
          })
          // console.log(allTreeList)
          this.necessaryTreeDataList = allTreeList

          // 必经隐藏区域复选框和样式
          this.$nextTick(() => {
            const doms = document.querySelectorAll('.necessaryStationCheck')
            doms.forEach(i => {
              i.parentNode.childNodes[0].style.display = 'none'
            })
          })
        }
      },
      setFormData() {
        this.itemData.necessaryCable = this.formData.necessaryCable
        this.itemData.forbiddenCable = this.formData.forbiddenCable
        this.itemData.necessaryStation = this.formData.necessaryStation
        this.itemData.forbiddenStation = this.formData.forbiddenStation
      },
      getFormData() {
        this.formData.necessaryCable = this.itemData.necessaryCable
        this.formData.forbiddenCable = this.itemData.forbiddenCable
        this.formData.necessaryStation = this.itemData.necessaryStation
        this.formData.forbiddenStation = this.itemData.forbiddenStation
      },
      getAllCable() {
        cableApi.simplifyList({}).then(res => {
          this.allCable = res.reverse() || []
          this.forbiddenCableList = this.allCable
          this.necessaryCableList = this.allCable
        })
      },
      getAllNode() {
        nodeApi.simplifyList({}).then(res => {
          const nodeList = []
          res.forEach(i => {
            if (i.nodeCategory !== 'LIGHT_SPLIT' && i.nodeCategory !== 'TRANSPORT' && i.stationId) {
              const item = {
                ...i,
                originalRegionId: i.roomId || i.stationId,
                parentId: i.roomId || i.stationId,
                parentKey: i.roomId || i.stationId,
                regionId: i.nodeId,
                label: i.nodeName,
                regionName: i.nodeName
              }
              nodeList.push(item)
            }
          })
          this.allTreeList = [...this.baseRegionList, ...nodeList]
        })
      },
      necessaryStationChange(data) {
        this.itemData.necessaryStation = data || []
      },
      forbiddenStationChange(data) {
        this.itemData.forbiddenStation = data || []
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .necessaryStationCheck {
    @include themeify {
      color: themed('textColor');
    }
  }
  .filter-station .el-form-item__label {
    line-height: 14px !important;
    padding-left: 20px;
  }
  .filter-station.el-form-item--mini .el-form-item__content {
    line-height: 16px !important;
  }
</style>
